<template>
	<div class="view">
		<template>
			<Top>{{title}}</Top>
		</template>
		<div class="main">
			<div class="main_con" :style="{minHeight:height+'px'}">
				<el-form label-position="top" :model="form" :rules="rules" ref="form">
					<el-form-item label="角色名称" prop="title">
						<el-input style="width: 400px;" v-model="form.title">
						</el-input>
					</el-form-item>
					<!-- <div class="main_title">权限设置</div> -->
					<el-form-item prop="checkList" label="权限设置">
						<div class="main_view" v-for="(item,index) in roleList" :key="index">
							<!-- <el-form-item :label="item.title"> -->
							<div class="main_title">{{item.title}}</div>
							<div class="check-box">
								<el-checkbox :indeterminate="checkState(index)" :value="checkIsAll(index)" label="全选"
									style="margin: 10px 20px 0px 0;" @change="checkSelect(index)"></el-checkbox>
								<el-checkbox-group v-model="form.checkList">
									<el-checkbox :label="items.tag" v-for="(items,indexs) in item.roleList"
										:key="indexs" style="margin-top: 10px;">{{items.title}}</el-checkbox>
								</el-checkbox-group>
							</div>
							<!-- </el-form-item> -->
						</div>
					</el-form-item>
				</el-form>
				<div class="main-btn">
					<el-button type="primary" size="medium" style="width: 200px;height:50px;" @click="submit">完成
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Top from "../../../components/top.vue"
	import {
		roleList
	} from "../../../util/data.js"
	import throttle from '@/util/throttle'
	import {mapState} from "vuex"
	export default {
		components: {
			Top
		},
		data() {
			return {
				height: document.documentElement.clientHeight - 105,
				checkList: [],
				roleList: roleList,
				form: {
					title: "",
					checkList: [],
				},
				rules: {
					title: [{
						required: true,
						message: '请输入角色名称',
						trigger: 'change'
					}],
					checkList: [{
						required: true,
						message: '请选择权限',
						trigger: 'change'
					}]
				},
				isAdd: false,
				title:"",
			}
		},
		computed: {
			// 判断是否全选
			checkIsAll() {
				return function(index) {
					let isTrue = true;
					for (let i = 0; i < this.roleList[index].roleList.length; i++) {
						if (!this.form.checkList.includes(this.roleList[index].roleList[i].tag)) {
							isTrue = false;
							break
						}
					}
					return isTrue
				}
			},

			checkState() {
				return function(index) {
					let isTrue = false;
					let count = 0;
					for (let i = 0; i < this.roleList[index].roleList.length; i++) {
						if (this.form.checkList.includes(this.roleList[index].roleList[i].tag)) {
							count++;
							isTrue = true;
						}
					}
					if (this.roleList[index].roleList.length == count) {
						isTrue = false
					}
					return isTrue
				}
			},
			...mapState(['urlParma'])
		},
		methods: {
			// 全选
			checkSelect(index) {
				console.log(this.checkIsAll(index))
				let list = this.roleList[index].roleList;
				if (this.checkIsAll(index)) {
					let checkList = new Set(this.checkList);
					for (let i = 0; i < list.length; i++) {
						checkList.delete(list[i].tag)
					}
					this.form.checkList = [...checkList];
				} else if (this.checkState(index)) {
					for (let i = 0; i < list.length; i++) {
						if (!this.form.checkList.includes(list[i].tag)) {
							this.$forceUpdate()
							this.form.checkList.push(list[i].tag)
						}
					}
				} else {
					for (let i = 0; i < list.length; i++) {
						this.$forceUpdate()
						this.form.checkList.push(list[i].tag)
					}
				}
			},
			// 提交校验
			submit: throttle(function(){
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.save();
					}
				})
			}, 1000),
			
			save(){
				console.log(this.form.checkList)
				let dataDict = {
					title:this.form.title,
					rightset:this.form.checkList.join("**")
				}
				console.log(dataDict)
				let url = this.$api.roleAdd;
				if(this.form.id){
					dataDict.id = this.form.id;
					url = this.$api.roleUpdate;
				}
				this.$http({
					method:'post',
					url:url,
					data:dataDict
				}).then(res =>{
					if(res.data.code==20000){
						this.$message.success(res.data.message);
						this.$store.commit("clearParma")
						this.$router.go(-1)
					}else{
						this.$message.error(res.data.message);
					}
				})
			},
			getDetail(){
				this.$http({
					url:this.$api.roleDetail+this.urlParma.id
				}).then(res =>{
					if(res.code==20000){
						this.form.checkList = res.data.detail.rightset.split("**");
					}
				})
			},
		},
		created() {
			if(this.urlParma.id){
				this.id = this.urlParma.id;
				this.title = "编辑角色"
				this.form.title = this.urlParma.title;
				this.form.id = this.urlParma.id;
				this.form.checkList = this.urlParma.rightset.split("**")
				console.log(this.form)
			}else{
				this.title = "创建角色"
			}
		}
	}
</script>

<style src="../../../assets/css/roleAdd.css" scoped>
	/* @import url(); */
</style>
